<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>死后事务委托合同</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    }

    body {
      background-color: #F5F5F5;
      color: #333333;
      min-height: 100vh;
      line-height: 1.6;
    }

    /* 顶部导航栏 */
    .header {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      padding: 20px;
      position: relative;
      min-height: 80px;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
    }

    .back-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    .back-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-50%) scale(1.1);
    }

    .header-title {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      flex: 1;
      letter-spacing: 0.5px;
    }

    /* 内容区域 */
    .content-container {
      background-color: white;
      margin: 0;
      padding: 25px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border-radius: 0;
      min-height: calc(100vh - 80px);
    }

    /* 标题区域 */
    .title-section {
      text-align: center;
      margin-bottom: 30px;
      padding: 20px;
      background-color: #F8F9FA;
      border-radius: 12px;
      border: 2px solid #E0E0E0;
    }

    .main-title {
      font-size: 24px;
      font-weight: 700;
      color: #333;
      margin-bottom: 15px;
      letter-spacing: 1px;
    }

    .subtitle {
      font-size: 18px;
      font-weight: 500;
      color: #666;
      margin-bottom: 20px;
    }

    /* 内容文本 */
    .content-text {
      font-size: 16px;
      color: #333;
      line-height: 1.8;
      margin-bottom: 20px;
      text-align: left;
    }

    .highlight-text {
      color: #E53E3E;
      font-weight: 600;
    }

    /* 流程说明区域 */
    .flow-section {
      margin: 30px 0;
      padding: 20px;
      background-color: #F8F9FA;
      border-radius: 12px;
      border-left: 4px solid #2196F3;
    }

    .flow-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }

    .flow-title::before {
      content: '';
      width: 4px;
      height: 20px;
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      border-radius: 2px;
      margin-right: 10px;
    }

    .flow-subtitle {
      font-size: 18px;
      font-weight: 500;
      color: #333;
      margin-bottom: 10px;
    }

    /* 步骤列表 */
    .step-list {
      list-style: none;
      padding: 0;
    }

    .step-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
      padding: 15px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .step-number {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 14px;
      margin-right: 15px;
      flex-shrink: 0;
    }

    .step-content {
      flex: 1;
    }

    .step-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }

    .step-description {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }

    /* Logo区域 */
    .logo-section {
      text-align: center;
      margin: 40px 0;
    }

    .logo {
      font-size: 32px;
      font-weight: 300;
      color: #999;
      letter-spacing: 2px;
    }

    /* 底部按钮 */
    .bottom-button {
      position: fixed;
      bottom: 20px;
      left: 20px;
      right: 20px;
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      border: none;
      border-radius: 25px;
      padding: 18px 20px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
    }

    .bottom-button:hover {
      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 25px rgba(33, 150, 243, 0.4);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .header {
        padding: 15px;
        min-height: 70px;
      }

      .header-title {
        font-size: 18px;
      }

      .content-container {
        margin: 0;
        padding: 20px;
      }

      .main-title {
        font-size: 20px;
      }

      .subtitle {
        font-size: 16px;
      }

      .content-text {
        font-size: 15px;
      }

      .flow-title {
        font-size: 18px;
      }

      .flow-subtitle {
        font-size: 16px;
      }

      .step-item {
        padding: 12px;
      }

      .step-title {
        font-size: 15px;
      }

      .step-description {
        font-size: 13px;
      }

      .bottom-button {
        padding: 16px 20px;
        font-size: 16px;
      }

      .logo {
        font-size: 28px;
      }
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <div class="header">
    <button class="back-btn" id="backBtn">
      ←
    </button>
    <div class="header-title">死后事务委托合同</div>
  </div>

  <!-- 内容区域 -->
  <div class="content-container">
    <!-- 标题区域 -->
    <div class="title-section">
      <div class="main-title">死后事务委托合同</div>
      <div class="subtitle">什么是死后事务委托合同</div>
    </div>

    <!-- 内容文本 -->
    <div class="content-text">
      死后事务委托合同是生前准备的一种，委托值得信赖的人处理死后除继承手续以外的行政处理。
    </div>

    <div class="content-text">
      委托范围非常广泛，可以详细指定从提交死亡通知、安排葬礼、联系相关人员到关于物品处理的指示等，这些往往会让周围的人感到困扰。
    </div>

    <div class="content-text">
      需要详细的行政处理，包括申请取消生命线和各种持续合同。虽然这些手续主要是近亲的角色，但必须与继承手续并行进行，需要相当大的努力。
    </div>

    <!-- 流程说明区域 -->
    <div class="flow-section">
      <div class="flow-title">使用流程</div>
      <div class="flow-subtitle">如果活的使用方法</div>

      <ul class="step-list">
        <li class="step-item">
          <div class="step-number">1</div>
          <div class="step-content">
            <div class="step-title">从应用咨询</div>
            <div class="step-description">按下屏幕上的咨询按钮，请填写必要信息。稍后，负责人会与您联系。</div>
          </div>
        </li>

        <li class="step-item">
          <div class="step-number">2</div>
          <div class="step-content">
            <div class="step-title">事务委托合同的创建</div>
            <div class="step-description">事前商议后，将创建事务委托合同并签约。</div>
            <div class="step-description" style="color: #E53E3E; margin-top: 8px;">
              ※根据委托的事务内容，预托费用等也会有所不同。
            </div>
            <div class="step-description" style="margin-top: 8px;">
              将死后详细处理委托的合同，只需委托人和受托人双方将决定内容公证化即可完成。
            </div>
            <div class="step-description" style="margin-top: 8px;">
              不需要向家庭法院申请并等待决定，因此不需要时间。
            </div>
            <div class="step-description" style="margin-top: 8px;">
              根据能够去公证处的时间，最快几天内就可以随时处于能够获得死后支持的状态。
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- Logo区域 -->
    <div class="logo-section">
      <div class="logo">logo</div>
    </div>
  </div>

  <!-- 底部按钮 -->
  <button class="bottom-button" id="inquireBtn">咨询</button>

  <script>
    // 返回按钮点击事件
    document.getElementById('backBtn').addEventListener('click', function () {
      // 检查URL参数判断来源页面
      const urlParams = new URLSearchParams(window.location.search);
      const from = urlParams.get('from');

      if (from === 'menu') {
        window.location.href = '菜单对话框.html';
      } else {
        window.location.href = '计划编辑页.html';
      }
    });

    // 咨询按钮点击事件
    document.getElementById('inquireBtn').addEventListener('click', function () {
      alert('咨询功能');
    });
  </script>
</body>

</html>